<template>
  <cell-wrapper
    v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
    :key="wrapperType"
    :wrapper-type="wrapperType"
    :style="{ backgroundColor: contentStyle.backgroundColor }"
  >
    <template v-if="columnsConfig.contentConfig.boolConfig === 'collection'">
      <star-filled v-if="value" style="color: gold" @click="handleSwitchValue" />
      <star-outlined v-else @click="handleSwitchValue" />
    </template>
    <a-switch
      v-else-if="columnsConfig.contentConfig.boolConfig === 'switch'"
      :checked="value"
      @change="handleSwitchValue"
    />
  </cell-wrapper>
</template>

<script>
  import { computed, defineComponent } from 'vue';
  import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';

  export default defineComponent({
    name: 'BoolCell',
    components: {
      CellWrapper,
    },
    props: {
      // 当前单元格的值
      value: {
        type: Boolean,
        default: false,
      },
      // 单元格的默认样式
      defaultStyle: {
        type: Object,
        default: () => ({}),
      },
      // 单元格的条件样式配置
      conditionStyle: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
      conditionValue: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前列的配置
      columnsConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前单元格是否处于编辑状态
      isEdit: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    emits: ['change', 'switchToFalse', 'switchToTrue'],
    setup(props, { emit }) {
      const checkCondition = (condition) => {
        if (!condition || !condition.conditionType) {
          return false;
        }
        const { conditionType, conditionValue } = condition;
        const currentConditionValue = props.conditionValue[conditionValue.id];

        // 如果条件值或单元格的值不存在，则不满足条件
        if (
          currentConditionValue === undefined ||
          currentConditionValue === null ||
          props.value === undefined ||
          props.value === null
        ) {
          return false;
        }

        switch (conditionType) {
          case 'contain': // 包含
            return props.value.indexOf(currentConditionValue) > -1;
          case 'notContain': // 不包含
            return props.value.indexOf(currentConditionValue) === -1;
          case 'empty': // 为空
            return !props.value;
          case 'notEmpty': // 非空
            return !!props.value;
          case 'startWith': // 开头是
            return props.value.startsWith(currentConditionValue);
          case 'notStartWith': // 开头不是
            return !props.value.startsWith(currentConditionValue);
          case 'endWith': // 结尾是
            return props.value.endsWith(currentConditionValue);
          case 'notEndWith': // 结尾不是
            return !props.value.endsWith(currentConditionValue);
          default:
            return false;
        }
      };
      // 内容显示的样式
      const contentStyle = computed(() => {
        let { iconType, icon, color, backgroundColor } = props.defaultStyle || {};

        (props.conditionStyle || []).forEach((item) => {
          const { condition, style } = item;

          // 如果没有条件配置或样式配置，则跳过该条件样式
          if (!condition || !style) {
            return;
          }

          // 如果条件满足，则使用该条件的样式覆盖默认样式
          if (checkCondition(condition)) {
            style.iconType && (iconType = style.iconType);
            style.icon && (icon = style.icon);
            style.color && (color = style.color);
            style.backgroundColor && (backgroundColor = style.backgroundColor);
          }
        });

        return { iconType, icon, color, backgroundColor };
      });

      const handleValueChange = (event) => {
        emit('change', event.target.value);
      };
      const handleSwitchValue = () => {
        if (props.value) {
          emit('switchToFalse');
        } else {
          emit('switchToTrue');
        }
      };
      return {
        contentStyle,
        handleSwitchValue,
        handleValueChange,
      };
    },
  });
</script>
